const path = require('path');
const webpack = require('webpack')
// 自动生成html模板并动态加载生产的xxx.bundle.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 每次打包时清空指定文件夹
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const hotMiddlewareScript = 'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000&reload=true';

module.exports = {
	mode: 'development', // 热更新只在开发模式下有用
	// entry: [
	//     'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000',
	//     './src/entrys/watch.js',
	// ],
	entry: {
		app: ['./src/entrys/watch.js', hotMiddlewareScript], // 使用了webpack-hot-middleware需要每个入口都配置
		print: ['./src/assets/js/print.js', hotMiddlewareScript] // 使用了webpack-hot-middleware需要每个入口都配置
	},
	output: {
		// filename: 'bundle.js',
		filename: '[name].bundle.js', // 根据entry动态输出
		path: path.resolve(__dirname, '../dists/watch'),
		publicPath: '/'	// 执行npm run server时用'/', 其他用'./'
	},
	devtool: 'inline-source-map', //明确指出运行时的报错文件，(由打包后的bundle.js映射的源文件)
	plugins: [
		new CleanWebpackPlugin({
			cleanStaleWebpackAssets: false // true清理所有文件， false只删除变动过的文件(如执行 npm run watch时dist下的index.html时没有改变的，不需要删除)
		}), // 每次打包前删除dist文件夹
		new HtmlWebpackPlugin({
			title: 'webpack-dev-middleware配合express及webpack-hot-middleware',
			filename: 'index.html',
			// template: 'index.html',
			inject: true,
			// favicon: path.join(__dirname, '..', 'favicon.ico')
		}),
		new webpack.HotModuleReplacementPlugin(), // 启动HMR, 热模块替换
		new webpack.NoEmitOnErrorsPlugin() // 在编译出现错误时，使用 NoEmitOnErrorsPlugin 来跳过输出阶段。这样可以确保输出资源不会包含错误。
	],
	module: {
		rules: [{
				test: /\.css$/,
				use: [
					'style-loader',
					'css-loader'
				]
			},
			{
				test: /\.(png|svg|jpg|gif)$/,
				use: [
					'file-loader'
				]
			}
		]
	}
}